<template>
    <div class="main-container">
        <ad-left v-if='$store.state.isPc'></ad-left>
        <div class="main">
            <ul class="ad-tab-comp" >
                <li :class="formData.ad_type == 1 ? 'active' : ''" @click='typeChange(1)'>場外廣告</li>
                <li :class="formData.ad_type == 2 ? 'active' : ''" @click='typeChange(2)'>擔保廣告</li>
            </ul>
            <ul class="ad-tab-comp">
                <li :class="formData.status == 1 ? 'active' : ''" @click='statusChange(1)'>已上架</li>
                <li :class="formData.status == 2 ? 'active' : ''" @click='statusChange(2)'>已下架</li>
            </ul>
            <div class="type-select-container s-b" v-if='formData.ad_type == 1'>
                <!-- 币种选择 -->
                <ul class="type-select f-s">
                    <li :class="formData.coin_id == 0 ? 'active' : ''" @click='coinIdChange(0)'>
                        全部
                    </li>
                    <li v-for='item in $store.state.coin' :key='item.id' :class="formData.coin_id == item.id ? 'active' : ''" @click='coinIdChange(item.id)'>
                        {{item.code}}
                    </li>
                </ul>
                <!-- <el-button size="small">批量下载</el-button> -->
            </div>
            <el-table 
				:data='table'
                border
                :header-cell-style="{background : '#E5F2FF'}"
				style='width : 1200px; margin: 0 auto;'>
                <!-- <el-table-column type='selection' width='50'></el-table-column> -->
				<el-table-column label='廣告類型' prop='ad_type'>
                    <template slot-scope="scope">
                        {{scope.row.ad_type | adTypeFilter}}
                    </template>
                </el-table-column>
                <el-table-column label='交易类型'>
                    <template slot-scope="scope">
                        {{scope.row.record_type == 1 ? '购买' : '出售'}}
                    </template>
                </el-table-column>
				<el-table-column label='編號' prop='ad_order_id' width='180'></el-table-column>
				<el-table-column label='價格' prop='price' v-if='$store.state.isPc && formData.ad_type == 1'>
                    <template v-slot='scope'>
                        {{scope.row.price}}{{scope.row.currency}}
                    </template>
                </el-table-column>
                <el-table-column label='目标金额' prop='price' v-if='formData.ad_type == 2' width='120'>
                    <template v-slot='scope'>
                        {{scope.row.price}}{{scope.row.currency}}
                    </template>
                </el-table-column>
                <el-table-column label='提供金额' prop='cur_price' v-if='formData.ad_type == 2' width='120'>
                    <template v-slot='scope'>
                        {{scope.row.cur_price}}{{scope.row.cur_currency}}
                    </template>
                </el-table-column>
				<el-table-column label='付款方式' prop='five' v-if='$store.state.isPc'>
                    <template slot-scope="scope">
                       <pay-type :pay-ment='scope.row.pay_type_list'></pay-type>
                    </template>
                </el-table-column>
				<el-table-column label='費率' prop='trade_rate'></el-table-column>
                <el-table-column label='狀態' prop='six'>
                    <template slot-scope="scope">
                       {{scope.row.status | adStatusFilter}}
                    </template>
                </el-table-column>
                <el-table-column label='操作' prop='six' width='140'>
                    <template slot-scope="scope" >
                        <el-button type='text' size="mini" @click='$router.push(`/ad-detail/${scope.row.id}/${formData.ad_type}`)'>編輯廣告</el-button>
                        <el-button type='text' size="mini" @click='changeAdStatus(scope.row)'>
                            {{scope.row.status == 1 ?'廣告下架' : '廣告上架'}}
                        </el-button>
                    </template>
                </el-table-column>
			</el-table>
            <div class="center" style="padding : 15px;" v-if='table && table.length'>
                <el-pagination
                    @current-change='pageChange'
                    :page-size ='formData.limit'
                    :total='total'
                    background
                    layout="prev, pager, next">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import AdLeft from '@c/AdLeft'
    import PayType from '@c/PayType'
    import { GetUserAds, ChangeAdStatus } from '@/api/ad'
    export default {
        components: {
            AdLeft,
            PayType
        },
        data() {
            return {
                mainActiveName : 'first',
                table : null,
                total : 0,
                formData : {
                    coin_id : 0, //币种id,全部为0
                    ad_type : 1, //1为场外广告,2为担保广告
                    status : 1, //1为上架,2为下架
                    page : 1,
                    limit : 10
                }
                
            };
        },
        mounted () {
            this.getMyAds();
        },
        methods :{
            getMyAds () {
                GetUserAds(this.formData)
                    .then(res => {
                        this.table = res.result.data;
                        this.total = res.result.total;
                    })
            },
            //状态更改
            statusChange (status) {
                this.formData.status = status;
                this.formData.coin_id = 0;
                this.page = 1;
                this.getMyAds();
            },
            //币种更改
            coinIdChange (coin_id) {
                this.formData.coin_id = coin_id;
                this.page = 1;
                this.getMyAds()
            },
            //
            typeChange (type) {
                this.table = null
                this.formData.ad_type = type;
                this.page = 1;
                this.getMyAds();
            },
            //页码改变
            pageChange (page) {
                this.formData.page = page;
                this.getMyAds();
            },
            //广告下架
            changeAdStatus (data) {
                ChangeAdStatus({
                    ids : [data.id],
                    status : data.status == 1 ? 2 : 1
                }).then(res => {
                    let message = data.status == 1 ? '下架成功' : '上架成功'
                    this.$message({
                        message,
                        type : 'success'
                    })
                    this.table = this.table.filter(item => {
                        return item.id != data.id
                    })
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .main-container{
            background: #fff;
        }
        .type-select{
            li {
                cursor: pointer;
                padding: 15px 10px;
                font-size: 14px;
            }
            .active {
                color: @mainColor;
            }
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .main-container {
            min-width: 1200px;
            margin: 25px auto;
            display: flex;
            justify-content: center;
        }
        .main {
            width: 1140px;
            background: #fff;
            .type-select-container {
                padding: 5px 20px 5px 0;
            }
            .type-select{
                li {
                    cursor: pointer;
                    padding: 15px 50px;
                    font-size: 14px;
                }
                .active {
                    color: @mainColor;
                }
            }
        }
    }
</style>